<template>
  <view class="address-box">
    <!-- 收货地址区域主题 -->
    <view class="address-body">
      <!-- 添加地址按钮 -->
      <button class="address-btn"
              hover-class="navigator-hover"
              v-if="!addressData"
              size="mini"
              @click="$emit('select-address')">
        请选择收货地址+
      </button>
      <!-- 默认选择地址展示区域 -->
      <view class="select-address-box"
            v-else
            @click="$emit('select-address')">
        <view class="header-box">
          <!-- 收货人姓名 -->
          <view class="name">收货人：{{addressData.name}}</view>
          <!-- 收货人号码 -->
          <view class="phone">
            联系电话：{{addressData.telephone}}
            <uni-icons type="arrowright"></uni-icons>
          </view>
        </view>
        <!-- 收获地址 -->
        <view class="address">
          <view class="address-label">收货地址：</view>
          <view class="address-value">{{addressData.address}}</view>
        </view>
      </view>
    </view>

    <!-- 收货地址区域底部分割线 -->
    <image class="address-border"
           src="/static/cart_icons/cart_border.png"></image>
  </view>
</template>

<script>
  export default {
    name: "my-address",
    props: {
      /**
       * 地址数据
       *  - name         姓名
       *  - telephone    号码
       *  - address      地址
       */
      addressData: {
        type: Object,
        default: null
      }
    },
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .address-box {
    padding: 0 14rpx;

    .address-body {
      height: 180rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .address-btn {
        background-color: rgb(15, 150, 20);
        color: #FFFFFF;
      }

      .select-address-box {
        width: 100%;
        font-size: 28rpx;

        .header-box {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .phone {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .uni-icons {
            font-size: 26rpx !important;
          }
        }

        .address {
          margin-top: 20rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .address-label {
            white-space: nowrap;
          }

          .address-value {
            /* 强制将词截断 */
            word-break: break-all;
          }
        }
      }
    }

    .address-border {
      display: block;
      height: 10rpx;
      width: 100%;
    }
  }
</style>
